<template>
	<view class="gui-relative" style="height:100vh;">
		<view class="gui-margin">
			<view class="gui-flex">
				<view class="" @tap="checkupG">
					<view class="coursegroup" :class="currenttype=='group'?'active':'unactive'" >
						团体课
					</view>
				</view>
				<view class="" @tap="checkupP">
					<view class="coursepersonal" :class="currenttype=='personal'?'active':'unactive'" >
						私教课
					</view>
				</view>
				
			</view>

			<view class="" v-if="currenttype=='group'">
				<view class="hulu-course-card history" v-if="appts.gappts&&appts.gappts.length>0" v-for="(g,ind) in appts.gappts"
					:key="ind">
					<view class="course-lft">
						<view class="lft-img">
							<image :src="g.Groupcourse.cover_image" style="will-change: transform;" mode="widthFix">
							</image>
							<text class="gui-text-center gui-text-small hulu-bg-primary-color1 hulu-primary-color">
								{{g.Groupcourse.name}}
							</text>
							<text class="gui-text-small" style="margin-left:4rpx" v-if="g.status=='2'">已上</text>
							<text class="gui-text-small content-second" style="margin-left:4rpx"
								v-if="g.status=='1'">待上</text>
						</view>

					</view>
					<view class="course-ct">
						<view class="ct-title">
							<text class="ct-name">{{g.Groupcourse.name}}</text>
							<view class="ct-ticket" :style="{backgroundColor:g.Groupcourse.color}">
							</view>
						</view>
						<view class="">
							<u-rate v-model="g.Groupcourse.intensity" count="5" readonly activeColor="#ffa502"></u-rate>
						</view>
						<view class="gui-text-small">
							{{g.Groupcourse.calorie}}焦
						</view>
						<view class="">
							<text class="content-second">
								{{g.Employee.nick_name}}
							</text>
						</view>
						<view class="gui-text-small">
							时间：{{g.Groupschedule?g.Groupschedule.start_time:''}}
						</view>

					</view>
					<view class="course-rgt">
						{{g.Groupcourse?g.Groupcourse.duration:''}}min

						<view class="course-btn">
							<view class="gui-text-small my-btn" v-if="g.status=='1'">
								<button @tap="cancelGAction(g.ID)">取消</button>
							</view>
						</view>
					</view>

				</view>
				<view v-if="appts.pappts && appts.gappts.length==0">
					<hulu-empty></hulu-empty>
				</view>
			</view>

			<view v-if="currenttype=='personal'">
				<view class="hulu-course-card history" v-if="appts.pappts && appts.pappts.length>0" v-for="(g,ind) in appts.pappts"
					:key="ind">
					<view class="course-lft">
						<view class="lft-img">
							<image :src="g.Personalcourse.cover_image" style="will-change: transform;" mode="widthFix">
							</image>
							<text class="gui-text-center gui-text-small hulu-bg-primary-color1 hulu-primary-color">
								{{g.Personalcourse.name}}
							</text>
							<text class="gui-text-small" style="margin-left:4rpx" v-if="g.status=='2'">已上</text>
							<text class="gui-text-small content-second" style="margin-left:4rpx"
								v-if="g.status=='1'">待上</text>
						</view>

					</view>
					<view class="course-ct">
						<view class="ct-title">
							<text class="ct-name">{{g.Personalcourse.name}}</text>

						</view>


						<view class="">
							<text class="content-second">
								{{g.Employee.nick_name}}
							</text>
						</view>
						<view class="gui-text-small">
							时间：{{g.Personalschedule?g.Personalschedule.start_time:''}}
						</view>
					</view>
					<view class="course-rgt">
						{{g.Personalcourse?g.Personalcourse.duration:''}}min
						<view class="course-btn">
							<view class="gui-text-small my-btn" v-if="g.status=='1'">
								<button @tap="cancelPAction(g.ID)">取消</button>
							</view>
						</view>
					</view>

				</view>
				<view v-if="appts.pappts.length==0">
					<hulu-empty></hulu-empty>
				</view>
			</view>
			<view class="" style="height:88rpx;">

			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import useGappt from '@/api/gappointment'
	import usePappt from '@/api/pappointment'
	import useUser from '@/api/user'

	import { ref } from 'vue'
	const { getUserAppt, appts } = useUser()
	const { cancelGAppointment } = useGappt();
	const { cancelPAppointment } = usePappt();
	getUserAppt()
	console.log(appts.value)
	const currenttype = ref("group")
	const checkupP = () => {
		console.log("sijiaoke")
		currenttype.value = "personal"
	}
	const checkupG = () => {
		console.log("tuantike33333")
		currenttype.value = "group"
	}
	const cancelGAction = async (id) => {
		await cancelGAppointment(id)
		await getUserAppt()
	}
	const cancelPAction = async (id) => {
		await cancelPAppointment(id)
		await getUserAppt()
	}
</script>

<style scoped lang="scss">
	.custom-style {
		color: white;
		background-color: red;
	}

	.pay-btn {
		height: 180rpx;
		line-height: 180rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);

		.pay-btn-warp {
			padding: 0 30rpx;
			width: 700rpx;
		}
	}

	.active {
		color: #2A82E4;
		background-color: #C2DEFF;
	}

	.coursegroup,
	.coursepersonal {
		line-height: 54rpx;
		height: 54rpx;
		padding: 10rpx 20rpx;
	}

	.unactive {
		color: #808080;
		background-color: #E5E5E5;
	}

	.my-btn button::after {
		border: none;
	}

	.course-rgt {
		position: relative;
	}

	.course-time {
		position: absolute;
		bottom: 4rpx;
	}

	.course-btn {
		position: absolute;
		width: 100%;
		top: 88rpx;

		.my-btn button {
			position: relative;
			display: block;
			margin-left: auto;
			margin-right: auto;
			padding-left: 0px;
			padding-right: 0px;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			border-top-left-radius: 16rpx;
			border-bottom-left-radius: 16rpx;
			border-top-right-radius: 0rpx;
			border-bottom-right-radius: 0rpx;
			box-sizing: border-box;
			text-align: center;
			text-decoration: none;
			line-height: 1.35;
			-webkit-tap-highlight-color: transparent;
			overflow: hidden;
			color: white;
			background-color: #11bf08;
			width: 100%;
			height: 100%;

		}

	}

	.content-second {
		font-weight: bolder;
		font-size: 20rpx;
		color: #0abf00;
		padding: 0 4rpx;
		background-color: #96e892;
	}

	.history {
		color: #999;
		box-shadow: none;
		border: 2rpx solid #ddd;
	}
</style>